<template>
    <el-container>
        <el-aside>
            <el-menu
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    unique-opened
                    default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                <MenuItem :data="menu" ></MenuItem>
            </el-menu>
        </el-aside>
        <el-main class="main">
            <el-tabs class="right" v-model="current" :closable="true" type="card" @tab-remove="removeTab" >
                <el-tab-pane v-for="(v,i) in tabs" :label="v.title" :name="v.name" style="display: none" v-show="v.show">
                </el-tab-pane>
            </el-tabs>
            <div class="frames">
                <iframe ref="frames" v-for="(v,i) in frames" v-show="v.show" width="100%" height="100%" frameborder="0" style="width: 100%;height: 100%;" :src="v.url" @load="onPageLoaded(v,i)"></iframe>
            </div>
            <div class="user">
<!--                <el-avatar size="large" src="img/face.jpg"></el-avatar>-->
                <img @click="logout" class="logout" width="24"  src="../assets/logout.png"/>
            </div>
        </el-main>
    </el-container>
    <!--    <div class="h100 wrap">-->
    <!--        <div class="right">-->
    <!--            <div class="header"></div>-->
    <!--            <div class="content"></div>-->
    <!--        </div>-->
    <!--    </div>-->
</template>

<script>
    import MenuItem from "../components/MenuItem";
    export default {
        name: "Index",
        components: { MenuItem},
        watch:{
            current(nv){
                this.frames.forEach(e => {
                    e.show = e.name === nv;
                }) ;
            }
        },
        data(){
            return {
                menu: [],
                tabs: [],
                frames: [],
                current: "",
                isCollapse: false
            }
        },
        mounted(){
            this.load()
            $(document).on("mousedown", ".el-tabs__item", this.tabClick);
        },
        destroyed(){
            $(document).off("mousedown", ".el-tabs__item", this.tabClick);
        },
        methods: {
            tabClick(e){
                if(e.button !== 1){
                    return
                }
                var id = e.target.id.replace("tab-", "");
                this.removeTab(id);
                // if(this.current == )
                // console.log(id)
            },
            load(){
                $.get("/menu/menu").then(e => {
                    // eval(e);
                    this.menu = e.data || [];
                    // console.log(e)
                }) ;
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }        ,
            go(obj){
                var _obj;
                if(_obj = this.tabs.find(e => e.name === obj.name)){
                    //frames里必定也有相同的东西
                    var i = this.frames.findIndex(e => e.name === obj.name);
                    if(i > -1){
                        //刷新改页面
                        this.$refs.frames[i].contentWindow.location.reload();
                    }
                    this.current = obj.name;
                    return
                }
                this.tabs.push(obj);
                //frames不再添加相同的东西
                var i = this.frames.findIndex(e => e.name === obj.name);
                if(i > -1){
                    this.frames.splice(i, 1);
                }
                this.$nextTick(_ =>{
                    this.frames.push(obj);
                    this.current = obj.name;
                });
                // console.log(this.tabs)
                // console.log("parent", url)
            },
            removeTab(targetName){
                let tabs = this.tabs;
                let activeName = this.current;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.tabs = tabs.filter(e => e.name !== targetName);
                var i = this.frames.findIndex(e => e.name === targetName);
                if(i > -1){
                    this.frames[i].show = false;
                }
                this.current = activeName;
            },
            getCompName(url){
                var idex = url.indexOf("#/");
                if(idex > -1){
                    url = url.substring(idex + "#/".length);
                }
                idex = url.indexOf("/");
                if(idex > -1){
                    return url.substring(0, idex);
                }
                console.log(url);
                return url;
            },
            logout(){
                localStorage.removeItem("$user");
                localStorage.removeItem("bpm-token");
                this.$cookies.remove("bpm-token");
                this.$router.replace("/login");
            },
            onPageLoaded(v,i){
                var frame = this.$refs.frames[i];//e.path[0];
                frame.contentWindow.VApp = this;
                frame.contentWindow.VData = v;
                console.log(frame.contentWindow)
                // frame.contentWindow. = this;
            },
            dispatch(event, method, args = [], close = false){
                var name = this.current;
                if(close){
                }
                // console.log(arguments)
                // this.frames.
                //检查是否在tab中
                do{
                    var item = this.tabs.find(e => e.name === event);
                    if(!item){
                        break
                    }
                    var i = this.frames.findIndex(e => e.name === item.name);
                    if(i === -1){
                        break
                    }
                    var frame = this.$refs.frames[i].contentWindow;
                    frame.VSelf && frame.VSelf[method] && frame.VSelf[method].apply(frame.VSelf, args);
                }while(0);

                if(close){
                    this.removeTab(name);
                }
            }
        }
    }
</script>

<style>
    .el-aside{
        width: auto !important;
        min-width: 200px;
    }
    .right .el-tabs__item{
        outline: none;
    }
    .right .el-tabs__header{
        position: absolute;
        left: 0;
        top: 0;
        right: 140px;
    }
    .right .el-tabs__content{
        /*margin-top: 41px;*/
        height: calc(100vh - 41px);
        top: 41px;
        left: 0;
        /*right: 0;*/
        /*bottom: 0;*/
    }
    .el-tab-pane{
        height: 100%;
    }
    .el-tabs__header{
        margin-bottom: 0;
    }
    .el-main{
        padding: 0;
        padding-left: 5px;
    }
</style>
<style scoped>
    .el-menu{
        height: 100vh;
        overflow-y: auto;
    }
    .wrap{
        display: flex;
    }
    .right{
        height: 100vh;
        position: relative;
        /*display: flex;*/
        /*flex-direction: column;*/
    }
    .main{
        position: relative;
    }
    .frames{
        position: absolute;
        top: 41px;
        left: 0;
        background: #fff;
        width: 100%;
        height: calc(100vh - 41px);
    }
    .header{
        height: 30px;
        background: #4A89DC;
    }
    .content{
        flex: 1;
    }
    .user{
        position: absolute;
        right: 10px;
        top: 0;
        height: 41px;
    }
    .logout{
        margin-top: 12px;
        cursor: pointer;
    }
</style>